<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="快捷查询" prop="checkByMonth">
        <el-radio-group v-model="checkByMonth" @change="handleQuery">
          <el-radio label="1">近一个月内</el-radio>
          <el-radio label="3">近三个月内</el-radio>
          <el-radio label="6">近六个月内</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <!--<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>-->
        <el-button type="primary" icon="el-icon-search" size="mini" @click="showMore">更多查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          :loading="exportLoading" v-hasPermi="['biz:ht-hiddentrouble:export']">导出</el-button>
      </el-col>
      <!--<el-col :span="1.5">-->
        <!--<el-button type="primary" plain icon="el-icon-plus" size="mini" v-hasPermi="['biz:ht-hiddentrouble:create']">打印-->
        <!--</el-button>-->
      <!--</el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <!--<el-table-column label="主键" align="center" prop="id" />-->
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="隐患名称" align="center" prop="htName" />
      <el-table-column label="隐患等级" align="center" prop="level">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.HT_LEVEL" :value="scope.row.level" />
        </template>
      </el-table-column>
      <el-table-column label="所属单位" align="center" prop="beCheckDept" />
      <el-table-column label="来源" align="center" prop="source">
        <template slot-scope="scope">
          <el-button type="text">
        <dict-tag :type="DICT_TYPE.HT_SOURCE" :value="scope.row.source" />
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="隐患描述" align="center" prop="description">
      </el-table-column>
      <el-table-column label="隐患状态" align="center" prop="state">
        <template slot-scope="scope">
          <el-button type="text">
            <dict-tag :type="DICT_TYPE.HT_STATE" :value="scope.row.state" />
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="检查人" align="center" prop="checkPeo">
      </el-table-column>
      <el-table-column label="检查日期" align="center" prop="checkDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.checkDate, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="整改方式" align="center" prop="rectificationType">
        <template slot-scope="scope">
          <span v-if="scope.row.rectificationType==0">立即整改</span>
          <span v-if="scope.row.rectificationType==1">限期整改</span>
        </template>
      </el-table-column>
      <el-table-column label="整改责任人" align="center" prop="rectificationPeo">
      </el-table-column>
      <el-table-column label="整改责任单位" align="center" prop="rectificationDept">
      </el-table-column>
      <el-table-column label="整改期限" width="160" align="center" prop="rectificationLimit">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.rectificationLimit, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="验收人" align="center" prop="cancelPeo">
      </el-table-column>
      <el-table-column label="验收日期" align="center" prop="cancelDate">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.cancelDate, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-document" @click="handleDetail(scope.row)"
           >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 更多查询 -->
    <el-dialog title="更多查询" :visible.sync="open" width="450px" append-to-body>
      <el-form ref="form" :model="queryParams" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="隐患名称" prop="htName">
              <el-input v-model="queryParams.htName" placeholder="请输入隐患名称" clearable size="small" @input="forceChange($event)"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="隐患状态">
              <el-select clearable v-model="queryParams.states" placeholder="请选择隐患状态" style="width: 100%;" @change="forceChange($event)">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.HT_STATE)" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="隐患等级">
              <el-select clearable v-model="queryParams.level" placeholder="请选择隐患等级" style="width: 100%;" @change="forceChange($event)">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.HT_LEVEL)" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="检查人">
              <el-select clearable style="width: 100%;" v-model="queryParams.checkPeoId" placeholder="请选择检查人" @change="forceChange($event)">
                <el-option v-for="item in users" :key="parseInt(item.id)" :label="item.nickname"
                  :value="parseInt(item.id)" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="检查日期">
              <el-date-picker v-model="dateRangeCheckDate" size="small" style="width: 100%" value-format="yyyy-MM-dd"
                              type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="整改责任人">
              <el-select clearable style="width: 100%;" v-model="queryParams.rectificationPeoId" placeholder="请选择检查人" @change="forceChange($event)">
                <el-option v-for="item in users" :key="parseInt(item.id)" :label="item.nickname"
                  :value="parseInt(item.id)" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="整改责任单位">
              <treeselect style="width: 100%;" v-model="queryParams.rectificationDeptId" :options="checkDeptOptions"
                :show-count="true" placeholder="请选择整改责任单位" :normalizer="normalizer" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </div>
    </el-dialog>
    <!-- 隐患详情弹窗 -->
    <el-dialog title="隐患详情" :visible.sync="openDetail" width="700px" append-to-body >
      <el-form ref="form" :model="form" label-width="100px" class="detail">
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              隐患名称
            </template>
            {{form.htName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              隐患等级
            </template>
            <dict-tag :type="DICT_TYPE.HT_LEVEL" :value="form.level" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              隐患描述
            </template>
            {{form.description}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              隐患状态
            </template>
            <dict-tag :type="DICT_TYPE.HT_STATE" :value="form.state" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              检查类型
            </template>
            <dict-tag :type="DICT_TYPE.CHECK_TYPE" :value="form.checkType" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              隐患地点
            </template>
            {{form.place}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              检查人
            </template>
            {{form.checkPeo}}
            </el-select>
          </el-descriptions-item>
          <!-- <el-descriptions-item>
            <template slot="label">
              所属风险点
            </template>
            {{form.checkPeoId}}
          </el-descriptions-item> -->
          <el-descriptions-item>
            <template slot="label">
              所属单位
            </template>
            {{form.checkDept}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改方式
            </template>
            {{form.rectificationType==0?'立即整改':'限期整改'}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改责任人
            </template>
            {{form.rectificationPeo}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改责任单位
            </template>
            {{form.rectificationDept}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改期限
            </template>
            {{ parseTime(form.rectificationLimit, "{y}-{m}-{d}") }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改完成时间
            </template>
            {{ parseTime(form.rectificationDate, "{y}-{m}-{d}") }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改前
            </template>
            <el-image v-for="item in form.ossImg" style="width: 100px; height: 100px;" :src="item.url" :preview-src-list="[item.url]"/>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              整改后
            </template>
            <el-image v-for="item in form.rectificationOssImg" style="width: 100px; height: 100px;" :src="item.url"  :preview-src-list="[item.url]"/>
            <!-- <el-image v-if="form.rectificationOssImg.length>0" style="width: 100px; height: 100px;" :src="form.rectificationOssImg[0].url"
              :preview-src-list="[form.rectificationOssImg]" /> -->
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              验收责任人
            </template>
            {{form.cancelPeo}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              验收日期
            </template>
            {{ parseTime(form.cancelDate, "{y}-{m}-{d}") }}
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDetail" type="primary">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import {
    listSimpleUsers
  } from "@/api/system/user";
  import {
    listSimpleDepts
  } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {
    getHtHiddentroubleSummary,
    getHtHiddenIssueSummarypage,
    exportHtHiddentroubleExcel
  } from "@/api/biz/htHiddenList";
  export default {
    name: "HtHiddentrouble",
    components: {
      ElRow,
      Treeselect
    },
    data() {
      return {
        checkByMonth:'1',
        dateRangeCheckDate:[],
        users:undefined,
        checkDeptOptions: undefined,
        // 遮罩层
        loading: false,
        // 导出遮罩层
        exportLoading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 隐患信息列表
        list: [{
          htName: 1
        }],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        openDetail: false,
        dateRangeCheckDate: [],
        // 查询参数
        queryParams: {
          pageNo: 1,
          pageSize: 10,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          htName: [{
            required: true,
            message: "隐患名称不能为空",
            trigger: "blur"
          }],
        }
      };
    },
    created() {
      //默认查询一个月的隐患清单
      this.handleQuery("1");
      //this.getList();
      this.getTreeselect()
      // 获得用户列表
      listSimpleUsers().then(response => {
        this.users = response.data;
      });
    },
    methods: {
      /** 查询部门下拉树结构 + 人员下拉 */
      getTreeselect() {
        listSimpleDepts().then(response => {
          //检查部门
          this.checkDeptOptions = [];
          this.checkDeptOptions.push(...this.handleTree(response.data, "id"));
        });
      },
      // 格式化部门的下拉框
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        // 处理查询参数
        let params = {
          ...this.queryParams
        };
         this.addBeginAndEndTime(params, this.dateRangeCheckDate, 'checkDate');
        // 执行查询
        getHtHiddenIssueSummarypage(params).then(response => {
          this.list = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        });
      },
      // 查看详情
      handleDetail(row) {
        const id = row.id;
        getHtHiddentroubleSummary(id).then(response => {
          this.form = response.data;
          this.openDetail = true
        });
      },
      /** 取消按钮 */
      cancel() {
        this.open = false;
        this.queryParams.htName = undefined
        this.queryParams.states = undefined
        this.queryParams.level = undefined
        this.queryParams.category = undefineds
        this.queryParams.checkPeoId = undefined
        this.queryParams.rectificationPeoId = undefined
        this.queryParams.rectificationDeptId = undefined
        this.getList()
      },
      cancelDetail() {
        this.openDetail = false;
      },
      /** 搜索按钮操作 */
      handleQuery(e) {
        this.queryParams.pageNo = 1;
        this.queryParams.htName = undefined
        this.queryParams.states = undefined
        this.queryParams.level = undefined
        this.queryParams.category = undefined
        this.queryParams.checkPeoId = undefined
        this.queryParams.rectificationPeoId = undefined
        this.queryParams.rectificationDeptId = undefined
        this.dateRangeCheckDate=[];
        switch(e) {
          case '1':
             var beginCheckDate=this.getFirstDayOfMonth(0);
             var endCheckDate=this.timeFormate(new Date());
             this.dateRangeCheckDate=[beginCheckDate,endCheckDate];
             break;
          case '3':
            var beginCheckDate=this.getFirstDayOfMonth(2);
            var endCheckDate=this.timeFormate(new Date());
            this.dateRangeCheckDate=[beginCheckDate,endCheckDate];
            break;
          case '6':
            var beginCheckDate=this.getFirstDayOfMonth(5);
            var endCheckDate=this.timeFormate(new Date());
            this.dateRangeCheckDate=[beginCheckDate,endCheckDate];
            break;
          default:console.log("快捷查询方式不存在！");
        }
        this.getList();
      },
      // 更多查询
      showMore() {
        this.dateRangeCheckDate = [];
        this.open = true;
      },

      /** 提交按钮 */
      submitForm() {
        this.open = false;
        this.checkByMonth=undefined;
        this.getList()
      },

      /** 导出按钮操作 */
      handleExport() {
        // 处理查询参数
        let params = {...this.queryParams};
        params.pageNo = undefined;
        params.pageSize = undefined;
        this.addBeginAndEndTime(params, this.dateRangeCheckDate, 'checkDate');
        // 执行导出
        this.$modal.confirm('是否确认导出所有隐患清单数据项?').then(() => {
          this.exportLoading = true;
          return exportHtHiddentroubleExcel(params);
        }).then(response => {
          this.$download.excel(response, '隐患清单.xls');
          this.exportLoading = false;
        }).catch(() => {});

//        // 处理查询参数
//        let params = {
//          ...this.queryParams
//        };
//        params.pageNo = undefined;
//        params.pageSize = undefined;
//        this.addBeginAndEndTime(params, this.dateRangeCheckDate, 'checkDate');
//        // 执行导出
//        this.$modal.confirm('是否确认导出所有隐患信息数据项?').then(() => {
//          this.exportLoading = true;
//          // return exportHtHiddentroubleExcel(params);
//        }).then(response => {
//          this.$download.excel(response, '${table.classComment}.xls');
//          this.exportLoading = false;
//        }).catch(() => {});
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRangeCheckDate = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      //获取本月第一天
      getFirstDayOfMonth:function(interval){
        var now = new Date();
        now.setMonth(now.getMonth()-interval)
        var day = now.setDate(1);
        return this.timeFormate(now);
      },
      //时间格式化
      timeFormate : function(date){
        if(!date || typeof(date) === "string"){
          this.error("参数异常，请检查...") ;
        }
        var year = date.getFullYear(); //年
        var month = date.getMonth() + 1; //月
        var day = date.getDate(); //日

        if (date.getMinutes() / 60 > 1) {
          hh += Math.floor(date.getMinutes()) / 60;
        }
        var clock = year + "-";
        if (month < 10)
          clock += "0";
        clock += month + "-";
        if (day < 10)
          clock += "0";
        clock += day;
        return clock;
      },
      forceChange(e){
        this.$forceUpdate()
      }
    }
  };
</script>
<style scoped>
  /deep/ .detail .el-input--medium .el-input__inner {
    border: none;
  }

  /deep/ .detail .el-col-12 {
    border: 0.5px solid #e9e9e9;
  }

  /deep/ .el-form-item {
    margin: 5px 10px;
  }
</style>
